<template>
  <div class="submission-list">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>提交记录</span>
        </div>
      </template>



      <!-- 提交记录表格 -->
      <el-table :data="tableData" v-loading="loading" border stripe>
        <el-table-column prop="id" label="提交ID" width="80" />
        <el-table-column prop="problemTitle" label="题目名称" min-width="200">
          <template #default="{ row }">
            <el-link type="primary" @click="handleToProblem(row)">
              {{ row.problemTitle }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="userAccount" label="提交用户" width="120" />
        <el-table-column prop="language" label="编程语言" width="100">
          <template #default="{ row }">
            <el-link type="primary" @click="handleViewCode(row)">
              {{ row.language }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="得分" width="80" />
        <el-table-column prop="timeComplexity" label="时间复杂度" width="120" />
        <el-table-column prop="submissionTime" label="提交时间" width="180">
          <template #default="{ row }">
            {{ formatDateTime(row.submissionTime) }}
          </template>
        </el-table-column>
        <!-- 移除评测结果列 -->
      </el-table>

      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getSubmissionList } from '../../api/submission'
import { useRouter } from 'vue-router'  // Add this import

const router = useRouter()  // Add this line

const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const tableData = ref([])

const searchForm = reactive({
  title: '',
  username: ''
})

// 获取状态对应的标签类型
const getStatusType = (status) => {
  const statusMap = {
    '通过': 'success',
    '未通过': 'danger',
    '评测中': 'warning',
    '等待评测': 'info'
  }
  return statusMap[status] || 'info'
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return ''
  return new Date(dateTime).toLocaleString()
}

// 获取提交记录数据
const fetchData = async () => {
  loading.value = true
  try {
    const params = {
      current: currentPage.value,
      pageSize: pageSize.value,
      title: searchForm.title || undefined,
      username: searchForm.username || undefined
    }
    
    const res = await getSubmissionList(params)
    if (res.code === 200 && res.data) {
      tableData.value = res.data.records || []
      total.value = res.data.total || 0
    } else {
      ElMessage.error(res.message || '获取数据失败')
    }
  } catch (error) {
    console.error('获取提交记录失败:', error)
    ElMessage.error(error.message || '获取提交记录失败')
    tableData.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  fetchData()
}

// 重置搜索
const resetSearch = () => {
  searchForm.title = ''
  searchForm.username = ''
  handleSearch()
}

// 改变每页数量
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchData()
}

// 改变页码
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchData()
}

onMounted(() => {
  fetchData()
})

// Add the handleViewCode function
const handleViewCode = (row) => {
  router.push({
    path: `/submission/detail/${row.id}`,
    query: {
      code: row.code,
      score: row.score,
      language: row.language,
      evaluate: row.evaluate  // 添加评测结果
    }
  })
}
// 在 script setup 部分添加处理函数
const handleToProblem = (row) => {
  router.push(`/problem/${row.problemId}`)
}
</script>

<style scoped>
.submission-list {
  padding: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>